import React, { useEffect, useState, useRef } from 'react';
import Taro, { getCurrentInstance, useDidShow } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { backgroundObj, loginData } from '@/utils/utils';
import { fetchWebIndex, fetchCheckMiniProgramUpdate } from '@/server/shop';
import Router from '@/utils/router'
import './index.scss'
const User = (props) => {
  const { params } = getCurrentInstance().router
  const { } = params
  const { organizationId = '' } = loginData() || {}
  const [data, setData] = useState({})
  useEffect(() => {
    // Taro.setStorageSync('userInfo', {
    //   goodsId: 46, goodsType: 'directLive', openId: 'odE6q6b-vBqrSMb1hrnkhUg1pGJU', organizationId: '1', ownerAdminId: 7, profile: 'https%3A%2F%2Fthirdwx.qlogo.cn%2Fmmopen%2Fvi_32%2FQ0j4TwGTfTJBQjSXAggpwVwmJT2h1r6zKGTxofmjRvVhicxjnLUXOWwja63aA7vcKd1z1vtmd3g8UoYldUraziaQ%2F132', shareId: 1, shareType: 'admin', token: 'qR7VsHXlm62vlKXQ0EKQuuNwRcF3H9z8', type: 'directLive', unionId: "oOixj6bov7BtJ2MdRjpoCVhiSdD4", username: "%E6%B7%A1%E7%84%B6"
    // })
    fetchData()
  }, [])

  useDidShow(() => {


    // const deleteParamsList = ['fromGoodsId', 'goodsId', 'goodsType', 'fromGoodsType']
    // const session = loginData() || {};
    // deleteParamsList.forEach(item => {
    //   delete session[item]
    // })
    // Taro.setStorageSync('userInfo', session)
  })
  const renderTitle = {
    directLiveList: '单场直播',
    liveCourseList: '直播课程',
    offlineGoodsList: '周边商品',
    videoCourseList: '点播课程'
  }
  const handleLink = (e) => {
    const { goodsType, id } = e
    Router('shopDetail', {
      args: {
        goodsId: id,
        goodsType
      }
    })
  }
  const LiveCard = (props) => {
    const { data } = props
    const { cover, goodsName, priceType, price, startTime, id, goodsType, replayContent } = data
    return <View className='liveCard_box'
      onClick={() => {
        handleLink(data)
      }}>
      <View className='liveCard_image' style={backgroundObj(cover.split(','))}>
        {replayContent && <View className='liveCard_content_btn'>回放</View>}
      </View>
      <View className='liveCard_content'>
        <View className='liveCard_title_box'>
          <View className='liveCard_content_title font_hide'>{goodsName}</View>
          {priceType === 'free' ? <View className='liveCard_content_tag'>免费</View> : <View className='liveCard_content_price'>{'￥' + price}</View>}
        </View>
        <View className='liveCard_content_time'>
          {startTime}
        </View>
      </View>
    </View>
  }
  const ShopCard = (props) => {
    const { data } = props
    const { cover, goodsName, priceType, price, startTime, goodsDesc, id } = data
    return (<View className='ShopCard_box' onClick={() => {
      handleLink(data)
    }}>
      <View className='ShopCard_image' style={backgroundObj(cover.split(','))}></View>
      <View className='ShopCard_content'>
        <View className='ShopCard_title font_hide'>{goodsName}</View>
        <View className='ShopCard_desc font_noHide'>{goodsDesc}</View>
        <View className='ShopCard_price'>{priceType === 'free' ? '免费' : <View><Text className='ShopCard_price_dola'>￥</Text>{price}</View>}</View>
      </View>
    </View>)
  }
  const OtherCard = (props) => {
    const { data } = props
    const { cover, goodsName, priceType, price, startTime, goodsDesc, id } = data
    return (<View className='otherCard_box' onClick={() => {
      handleLink(data)
    }} style={backgroundObj(cover.split(','))}>
      <View className='otherCard_price'>{priceType === 'free' ? '免费' : '￥' + price}</View>
      <View className='otherCard_title font_hide'>{goodsName}</View>
    </View>)
  }
  const fetchData = () => {
    fetchWebIndex({ organizationId }).then(e => {
      fetchCheckMiniProgramUpdate().then(val => {
        const { needUpdate } = val
        const { liveCourseList = [], offlineGoodsList = [], videoCourseList = [] } = e
        if (needUpdate === '1') {
          return setData({ liveCourseList, offlineGoodsList, videoCourseList })
        }
        return setData(e)
      })

    })
  }
  return (
    <View className='home_box'>
      <View className='home_content'>
        {Object.keys(data).map((item, index) => {
          const RenterTemplate = {
            directLiveList: (data[item] && data[item].length) ?
              <View className='home_body_list'>
                {data[item].map((item, index) => {
                  return <LiveCard key={index} data={item}></LiveCard>
                })}
              </View> : [],
            liveCourseList:
              (data[item] && data[item].length) ? <View className='home_body_Scorll'>
                {data[item].map((item, index) => {
                  return <OtherCard key={index} data={item}></OtherCard>
                })}
              </View> : [],

            offlineGoodsList:
              (data[item] && data[item].length) ? <View className='home_body_Scorll'>
                {data[item].map((item, index) => {
                  return <OtherCard key={index} data={item}></OtherCard>
                })}
              </View> : [],


            videoCourseList: (data[item] && data[item].length) ? <View className='home_body_list'>
              <View className='home_flex'>
                {
                  data[item].map((item, index) => {
                    return <ShopCard key={index} data={item}></ShopCard>
                  })
                }
              </View>
            </View> : []
          }
          return <View key={index} className='home_body'>
            <View className='home_body_titleBox'>
              <View className='home_body_title'>{renderTitle[item]}</View>
              <View className={`home_${item}_icon`}></View>
            </View>
            {RenterTemplate[item]}
          </View>
        })}
      </View>
    </View>
  )
}
export default User